<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Look At</title>
    <meta name="description" content="Look At - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- A camera  -->
      <a-camera id="camera" position="0 1.8 4"></a-camera>

      <!-- A target entity -->
      <a-sphere id="target" color="#404040" radius="0.5">
        <a-animation attribute="position" from="-12 6 -12" to="8 3 -2" dur="1500" repeat="indefinite" fill="forwards" direction="alternate"></a-animation>
      </a-sphere>

      <!-- Entities look at the target -->
      <a-box width="1" depth="1" height="1" color="#4CC3D9" look-at="#target"
             position="-4 0 -2"></a-box>
      <a-cylinder radius="0.6" height="2" color="#7BC8A4" look-at="#target"
                  position="0 0 -2"></a-cylinder>
      <a-box width="0.5" depth="1" height="2" color="#F16745" look-at="#target"
             position="4 0 -2"></a-box>
      <a-cylinder radius="0.2" height="2" color="#7BC8A4" look-at="#target"
                  position="-4 0 1"></a-cylinder>
      <a-box width="2" depth="1" height="0.25" color="#93648D" look-at="#target"
             position="0 0 1"></a-box>
      <a-box width="1" depth="2" height="0.5" color="#999" look-at="#target"
             position="4 0 1"></a-box>

      <!-- This entity looks at the camera. Use WASD controls to test it -->
      <a-box width="2" depth="2" height="2" color="#FFC65D" look-at="#camera"
             position="-6 2.5 -2"></a-box>

      <a-image position="0 -1.2 0" src="../../assets/img/radial-highlight.png"
               rotation="-90 0 0" scale="10 10 10"></a-image>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
